<template>
    <div class="instructor-list">
      <el-table :data="instructors" stripe style="width: 100%">
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="gender" label="性别" width="180">
          <template slot-scope="{ row }">
            {{ row.gender === '男' ? '♂' : '♀' }}
          </template>
        </el-table-column>
        <el-table-column prop="phone_number" label="电话"></el-table-column>
        <el-table-column prop="email" label="邮箱">
          <template slot-scope="{ row }">
            <a :href="`mailto:${row.email}`">{{ row.email }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="teaching_style" label="教学风格"></el-table-column>
        <el-table-column prop="available_times" label="可预约时段"></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="{ row }">
            <el-button type="primary" @click="selectInstructor(row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        instructors: [],
        total: 0,
        currentPage: 1,
        pageSize: 10
      };
    },
    created() {
        this.instructors=[
    {
      "name": "张伟",
      "gender": "男",
      "phone_number": "13812345678",
      "email": "zhangwei@example.com",
      "teaching_style": "幽默风趣，擅长互动式教学",
      "available_times": "周一至周五 18:00-21:00"
    },
    {
      "name": "王芳",
      "gender": "女",
      "phone_number": "13987654321",
      "email": "wangfang@example.com",
      "teaching_style": "严谨专业，注重基础训练",
      "available_times": "周六日 9:00-12:00, 14:00-18:00"
    },
    {
      "name": "李强",
      "gender": "男",
      "phone_number": "15876543210",
      "email": "liqiang@example.com",
      "teaching_style": "实战型教学，丰富案例分析",
      "available_times": "工作日晚上 + 周末全天"
    },
    {
      "name": "陈雪",
      "gender": "女",
      "phone_number": "18655556666",
      "email": "chenxue@example.com",
      "teaching_style": "耐心细致，善于激发学生潜能",
      "available_times": "周二/四晚 19:00-21:30"
    },
    {
      "name": "赵刚",
      "gender": "男",
      "phone_number": "13711112222",
      "email": "zhaogang@example.com",
      "teaching_style": "系统化教学，课程结构清晰",
      "available_times": "每日 10:00-16:00（除周三）"
    }
  ];
      //this.fetchInstructors();
    },
    methods: {
      async fetchInstructors() {
        try {
          const response = await axios.get('/api/instructors', {
            params: {
              page: this.currentPage,
              per_page: this.pageSize
            }
          });
          this.instructors = response.data.items;
          this.total = response.data.total;
        } catch (error) {
          console.error('获取教练数据失败:', error);
        }
      },
      handlePageChange(page) {
        this.currentPage = page;
        this.fetchInstructors();
      },
      selectInstructor(instructor) {
        // 这里可以实现选择逻辑，例如跳转到详情页或保存到本地存储
        console.log('选择了教练:', instructor);
      }
    }
  };
  </script>
  
  <style scoped>
  .instructor-list {
    padding: 20px;
  }
  
  .el-table {
    margin-bottom: 20px;
  }
  </style>